<template>
  <div class="app-header">
    <div class="main-header">
      <div></div>
      <a-dropdown placement="bottomRight">
        <div class="d-flex" style="cursor: pointer">
          <a-avatar v-if="user" :src="user.avatar || avatar" size="30" />
          <span class="ml-8 c-admin">{{ user?.name }}</span>
        </div>
        <template #overlay>
          <a-menu @click="onClick">
            <a-menu-item key="change_password">
              <i class="iconfont icon-icon-password c-red" style="font-size:16px; margin-right: 8px;"></i>
              修改密码
            </a-menu-item>
            <a-menu-item key="login_out">
              <i class="iconfont icon-a-icon-logout c-red" style="font-size:16px; margin-right: 8px;"></i>
              退出登录
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import avatar from '@/assets/images/commen/avatar.png';
import { clearToken } from '@/utils/index';
import type { MenuProps } from 'ant-design-vue';

const loginUserStore = useUserStore();
const router = useRouter();

const user = computed(() => loginUserStore.getUser?.user || null);

const onClick: MenuProps['onClick'] = ({ key }) => {
  if (key === 'login_out') {
    clearToken();
    loginUserStore.logout();
    router.push('/login');
  } else if (key === 'change_password') {
    router.push('/change-password');
  }
};
</script>


<style scoped lang="less">
.app-header {
  width: 100%;
  background-color: white !important;
  box-sizing: border-box;
  padding: 0px 24px;
}

.main-header {
  width: 100%;
  background-color: white !important;
  height: 48px;
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
